<template>
  <div class="missions">
    <!--  搜索框部分  -->
    <div class="status">
      <h1>Search Mission</h1>
      <input type="text" />
    </div>
    <!--  展示历史任务部分  -->
    <div class="cards">
      <Card v-for="item in list" :missionName="item.missionName" :fileName="item.fileName"></Card>
    </div>
    <!--  分页插件部分  -->
    <el-pagination
        background
        layout="prev, pager, next"
        :total="pageInfo.total" :page-size="3"
        @prev-click="pageChange" @next-click="pageChange" @current-change="pageChange">
    </el-pagination>
  </div>
</template>

<script>
import Card from "components/mainPage/Card";
import http from "@/util/request";

export default {
  name: "Missions",
  data(){
    return{
      pageInfo: {},
      list:[],
      curPage: 0
    }
  },
  components: {
    Card
  },
  methods: {
    pageChange(curPage){
      http.get("/getMissions/"+curPage).then(response=>{
        this.pageInfo = response.data;
        this.list = response.data.list;
        this.curPage = curPage;
      });
    }
  },
  computed: {
    missionIsAdd(){
      return this.$store.state.isChange;
    }
  },
  watch: {
    missionIsAdd(val, oldVal){
      this.pageChange(this.curPage);
    }
  },
  beforeCreate() {
    http.get("/getMissions/1").then(response=>{
      this.pageInfo = response.data;
      this.list = response.data.list;
    });
  }
}
</script>

<style scoped>
.missions{
  margin: 0rem 2rem 2rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 2;
}

.status {
  /* margin-bottom: 3rem; */
}

.status input {
  background: linear-gradient(
      to right bottom,
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0.3)
  );
  border: none;
  width: 50%;
  padding: 0.5rem;
  border-radius: 2rem;
}

.cards{
  width: 550px;
}
</style>